<template>
      <div>

        <myheader></myheader>

      <br><br>
      <!--面包屑导航-->
      <Breadcrumb :datas="datas"></Breadcrumb>

	<section class="featured-block text-center">
		<div class="container">

      <table>
        <tr>
          <td>用户名</td>
          <td><input type="text" v-model="username"></td>
        </tr>
        <tr>
          <td>密码</td>
          <td><input type="text" v-model="password"></td>
        </tr>
        <tr>
          <td>验证码</td>
          <td><input type="text" v-model="code"></td>
        </tr>
        <tr>
          <td style="padding:5px;"></td>
          <td style="padding:5px;">
            <img id="mycode" @click="changeimg" :src="src" />
          </td>
        </tr>
        <tr>
          <td></td>
          <td><button @click="subint">注册</button>
          <button @click="reset">重置</button></td>
        </tr>
      </table>




		</div>
	</section>





	<myempennage></myempennage>

  </div>
</template>

<script>
  //导入头部包
  import myheader from './myheader'
  import myempennage from './myempennage'

    export default {
        name: "reg",
      data () {
          return {
            //声明面包屑变量
            datas:[{title:'首页', route:{name:'index'}}, {title:'注册页'}],
            username:'',
            password:'',
            code:'',
            src:'http://127.0.0.1:8000/code/'
          }
        },

      // 注册组件标签
      components:{
        'myheader': myheader,
        'myempennage': myempennage
      },

        mounted:function(){



      },
        methods:{
          // 刷新验证码  局部刷新
          changeimg:function () {
            // 随机字符串
            var num = Math.ceil(Math.random()*10)
            // 赋值地址
            this.src = this.src + '?code=' + num
          }
          ,
          // 重置
          reset:function(){
            this.username = '';
            this.password = '';

          },

          // 提交注册
          subint:function () {
            if(this.username == ''){
              // alert('用户名不能为空')
              this.$Message('用户名不能为空')
              return false
            }
            if(this.password == ''){
              // alert('密码不能为空')
              this.$Message('密码不能为空')
              return false
            }
            this.axios.get(
              'http://127.0.0.1:8000/reg/',
              {params:{username: this.username, password: this.password, code:this.code}}
              ).then(res=>{
                console.log(res)
              this.$Message(res.data.msg)
            })
          },


        }


    }
</script>

<style scoped>

</style>
